<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/20 0020
  Time: 23:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<body>
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:950px;
        border-collapse:collapse;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        text-align: center;
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:5px}
    .tdcc{
        height:40px;
        width: 80px;
        background-color: rgb(250,250,250);
    }
    .tdcc1{
        height:40px;
        width:150px;
    }
    .imgDelete{
        display: inline-block;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        background-color: #888;
        text-align: center;
        color: #fff;
        line-height: 16px;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        right: -8px;
        top: -8px;
    }
    .dragItemBox{
        position: relative;margin-right: 10px;margin-top: 5px;float: left;
    }

    .searchTab{font:12px arial,helvetica,sans-serif;border:2px solid #e0e0e0}
</style>
<script type="text/javascript" src="${staticPath }/static/autoCompleteData.js" charset="utf-8"></script>
<script>
    $(function () {
        $("#number_two").hide();//将第二步隐藏
        //************************************************//
        $(function(){
            $("#seller_tt").datagrid({//数据表格
                url:"${path}/product/addProudctGuerySelllerList.do",
                width:"994",
                height:"400px",
                fitColumns: true,//宽度自适应
                align:"center",
                loadMsg:"正在处理，请等待......",
                striped: true,//true是否把一行条文化
                idField:"id",//唯一性标示字段
                pagination:true,//显示分页栏
                rownumbers:true,//显示行号
                singleSelect:true,//true只可以选中一行
                frozenColumns:[[//冻结字段
                    {field:"ck",checkbox:true}
                ]],
                onClickCell: function (rowIndex, field, value) {
                    IsCheckFlag = false;
                },
                onSelect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#seller_tt").datagrid("unselectRow", rowIndex);
                    }
                },
                onUnselect: function (rowIndex, rowData) {
                    if (!IsCheckFlag) {
                        IsCheckFlag = true;
                        $("#seller_tt").datagrid("selectRow", rowIndex);
                    }
                },
                columns:[[//未冻结字段
                    {field:"userZH",title:"商家账号",width:60},
                    {field:"sellerName",title:"商家名称",width:60},
                    {field:"sellerLogo",title:"商家logo",width:60,formatter:formatterImg},
                    {field:"verifyType",title:"审核状态",width:30,
                        formatter:function(value,rowData,rowIndex){  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            if(value=="0"){
                                return "<font class='color_002'>待审核</font>";
                            }else if(value=="1"){
                                return "<font class='color_001'>通过</font>";
                            }else if(value=="2"){
                                return "<font class='color_003'>拒绝</font>";
                            }
                        }
                    },
                    {field:"status",title:"状态",width:30,
                        formatter:function(value,rowData,rowIndex){  //function里面的三个参数代表当前字段值，当前行数据对象，行号（行号从0开始）
                            if(value=="0"){
                                return "<font class='color_003'>禁用</font>";
                            }else if(value=="1") {
                                return "<font class='color_001'>正常</font>";
                            }
                        }
                    },
                    {field:"settlementRatio",title:"结算比例(%)",width:40},
                    {field:"tel",title:"联系电话",width:60},
                    {field:"address",title:"地址",width:80},
                    {field:"createDate",title:"创建时间",width:80,formatter: formatDatebox}
                ]],
            });
            //扩展的Date的format方法(上述插件实现) 日期转换格式
            Date.prototype.format = function (format) {
                var o = {
                    "M+": this.getMonth() + 1, // month
                    "d+": this.getDate(), // day
                    "h+": this.getHours(), // hour
                    "m+": this.getMinutes(), // minute
                    "s+": this.getSeconds(), // second
                    "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
                    "S": this.getMilliseconds()
                    // millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(RegExp.$1, (this.getFullYear() + "")
                        .substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(format))
                        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                return format;
            }
            //调用日期转化格式方法
            function formatDatebox(value) {

                if (value == null || value == '') {
                    return '';
                }
                var dt;
                if (value instanceof Date) {
                    dt = value;
                } else {
                    dt = new Date(value);
                }
                return dt.format("yyyy-MM-dd hh:mm:ss");
            }

        });
    });

    //确认选择机构
    function confirmSeller() {
        var rowsData = $("#seller_tt").datagrid("getSelections");//找到所有选中的行
        if(rowsData.length<=0) {
            $.messager.alert('系统提示', '请先选择要操作商家', "info");
        }else{
            $("#number_one").hide();
            $("#number_two").show();
            $("#sellerId").val(rowsData[0].id);
            $("#areaIds").val(rowsData[0].areaIds);
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url:"${path }/seller/findSellerCity.do",
                data: {"areaIds": rowsData[0].areaIds},
                success: function(data){
                    if(data.success){
                        console.log(data.obj);
                        $("#oneAreaId").val(data.obj[0].id);
                        $("#oneAreaName").val(data.obj[0].name);
                        $("#twoAreaId").val(data.obj[1].id);
                        $("#twoAreaName").val(data.obj[1].name);
                        $("#threeAreaId").val(data.obj[2].id);
                        $("#threeAreaName").val(data.obj[2].name)
                    }else{
                        $.messager.alert("系统提示", "构建城市失败!","error");
                    }
                },
                error:function(){
                    $.messager.alert("系统提示", "服务器连接失败!","error");
                }
            });
            $("#sellerOK").text("已选择商家:"+rowsData[0].sellerName);
            ue1.setContent(rowsData[0].buyInfo);
            ue2.setContent(rowsData[0].appointmentInfo);
            }
    }
    //重置
    function reset() {
        $("#sellerzh").val("");
        $("#searchsellerName").val("");
        $('#seller_tt').datagrid('reload');
        var options = $("#seller_tt").datagrid('getPager').data("pagination").options;
        options.pageNumber = 1;
        //重新加载
        $("#seller_tt").datagrid('options').url = "${path}/product/addProudctGuerySelllerList.do";
    }
    //查询
    function queryingSeller() {
        var queryParams = {phone:$("#sellerzh").val(),sellerName:$("#searchsellerName").val()}
        var options = $("#seller_tt").datagrid('getPager').data("pagination").options;
        options.pageNumber = 1;
        //重新加载
        $("#seller_tt").datagrid('options').url = "${path}/product/addProudctGuerySelllerList.do";
        $("#seller_tt").datagrid('options').queryParams = queryParams;
        $("#seller_tt").datagrid('reload');
    }

    //初始化分类树
    $(function(){
        $('#categoryIds').combotree({
            url : '${path }/category/allTree.do',
            multiple: true,
            onlyLeafCheck:true,
            cascadeCheck : false,
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            onCheck:function(node, checked){
                if(node.children == 'undefined'|| node.children == null || node.children.length <= 0){
                    $("#labels").empty();
                    $("#attrs").empty();
                }
                $("#categoryIds").attr("categoryIds_",0)
            }
        });

    });

    /**
     * 构建标签
     */
    function buildLabels(){
        var categoryIds = $("#categoryIds").combotree('getValues');
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        categoryIds = categoryIds.join(",");
        $("#labels").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:"${path }/label/buildLabelds.do?productId=-1",
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#labels").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("系统提示", "服务器连接失败!","error");
            }
        });
    }

    /**
     * 构建属性
     */
    function buildAttrs(){
        var categoryIds = $("#categoryIds").combotree('getValues');
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        categoryIds = categoryIds.join(",");
        $("#attrs").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:"${path }/attribute/buildAttributes.do?productId=-1",
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#attrs").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("系统提示", "服务器连接失败!","error");
            }
        });
    }


    //提交from数据
    function submitForm() {
        var type_=$("#type_").val();
        if(type_==-1){
            $.messager.alert("系统提示", "请选择一个类别!","info");
            return;
        }
        var categoryIds=$("#categoryIds").attr("categoryIds_");
        alert(categoryIds);
        if(categoryIds==""){
            $.messager.alert("系统提示", "产品分类必填","info");
            return;
        }
        progressLoad();
        $.ajax({
            cache: true,
            type: "POST",
            url:"${path }/product/add.do",
            data:$('#saveinfoProduct').serialize(),// 你的formid
            async: false,
            error: function(request) {
                progressClose();
                $.messager.alert("系统提示", "服务器连接失败!","error");
            },
            success: function(data) {
                progressClose();
                if (data.success) {
                    $.messager.alert("系统提示", "保存成功","info",function(){
                        closeWin('modelAdd');
                        reloadpProductDataGrid();
                    });

                }else{
                    progressClose();
                    $.messager.alert("系统提示", data.msg,"error");
                }
            }
        });

    }

</script>

<div>
    <!--number one-->
    <div id="number_one">
      <p style="color: red">*请选择商家确认后添加产品</p>
        <div style="height: 40px;border: 1px solid #e0e0e0">
            <table class="searchTab">
                <tr>
                    <td class="search_toright_td"  style="width:60px;">商家账号：</td>
                    <td class="search_toleft_td" style="width:80px;"><input type="text" style="width:90px;" id="sellerzh" name="sellerzh" class="searchTabinput"/></td>
                    <td class="search_toright_td" style="width:60px;">商家名称：</td>
                    <td class="search_toleft_td" style="width:80px;"><input type="text" style="width:90px;" id="searchsellerName" name="sellerName" class="searchTabinput"/></td>
                    <td class="search_toleft_td">&nbsp;&nbsp;
                        <a id="btnCancel" class="easyui-linkbutton" icon="icon-search" href="javascript:queryingSeller()">查询</a>
                        <a id="btnCance2" class="easyui-linkbutton"  iconCls="icon-undo" href="javascript:reset()">重置</a>
                    </td>
                </tr>
            </table>
        </div>
        <table id="seller_tt">
        </table>
        <div  data-options="region:'south',border:false" style="height: 24px; padding-top: 8px;text-align: center" >
            <a  class="easyui-linkbutton" icon="icon-save" onclick="confirmSeller()" >确定</a>
            <a  class="easyui-linkbutton" icon="icon-cancel" onclick="closeWin('modelAdd')" >取消</a>
        </div>
    </div>

    <!--number two-->
    <div id="number_two" style="width:994px">
    <form id="saveinfoProduct" action="" method="post">
    <div class="easyui-tabs"  data-options="tabWidth:150"  style="width:993px;height:533px ;padding:0px">
    <!---***********************************产品基本信息star****************************************************************************************************************************-->
    <div title="产品基本信息"  data-options="iconCls:'icon-edit'" style="padding:20px">
        <table class="grid">
            <p style="color: red" id="sellerOK"></p>
           <input type="hidden" id="sellerId" name="sellerId" value="">
            <input type="hidden" id="areaIds" name="areaIds" value="">
            <tr>
                <td colspan="7">产品基本信息</td>
            </tr>
            <tr>
            <td class="tdcc">产品名称:</td>
                <td><input name="name" class="easyui-validatebox" data-options="required:true"  type="text" value=""></td>
            <td class="tdcc">库存:</td>
                <td><input name="repertory" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"    type="text" value=""></td>
            <td class="tdcc">是否需要验证码:</td>
                <td ><span>是:</span><input checked="checked" name="needVerificationCode" type="radio" value="1"><span>否</span><input name="needVerificationCode" type="radio" value="0"></td>
        </tr>
            <tr>
                <td class="tdcc">原价:</td>
                <td><input name="originPrice" class="easyui-validatebox" data-options="required:true"  type="text" value=""></td>
                <td class="tdcc">现价:</td>
                <td><input name="price" type="text" class="easyui-validatebox" data-options="required:true"  value=""></td>
                <td class="tdcc">虚拟销量:</td>
                <td><input name="virtualSalesCount"  class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"   type="text" value=""></td>
            </tr>
            <tr>
                <td class="tdcc">虚拟预约人数:</td>
                <td><input name="virtualAppointmentCount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"   type="text" value=""></td>
                <td class="tdcc">虚拟评论数量:</td>
                <td><input name="virtaulCommentCount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"  type="text" value=""></td>
                <td class="tdcc">虚拟收藏数:</td>
                <td><input name="virtualCollectAccount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true" type="text" value=""></td>
            </tr>
            <tr>
                <td class="tdcc">(商家)省份:<input id="oneAreaId" name="oneAreaId" type="hidden"></td>
                <td><input id="oneAreaName" name="oneAreaName" class="easyui-validatebox"   readonly="readonly"   type="text" value=""></td>
                <td class="tdcc">(商家)城市:<input id="twoAreaId" name="twoAreaId" type="hidden"></td>
                <td><input id="twoAreaName" name="twoAreaName" class="easyui-validatebox"  readonly="readonly"   type="text" value=""></td>
                <td class="tdcc">(商家)区域:<input id="threeAreaId" name="threeAreaId" type="hidden"></td>
                <td><input id="threeAreaName" name="threeAreaName" class="easyui-validatebox"  readonly="readonly"  type="text" value=""></td>
            </tr>
            <tr>
                <td class="tdcc">产品类别:</td>
                <td><select id="type_" name="type" style="width: 150px">
                    <option value="-1">请选择</option>
                    <option value="0">体检套餐</option>
                    <option value="1">线上体检卡</option>
                    <option value="2">线下体检卡</option>
                    <option value="3">邮寄产品</option>
                </select></td>
                <td class="tdcc"></td>
                <td></td>
                <td class="tdcc"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"  style=" height: 80px">预约须知:</td>
                <td colspan="5"  style=" height: 80px"><textarea  name="appointmentInform" class="easyui-validatebox"  style="width: 500px   ; height: 80px;resize:none;" placeholder="预约须知" ></textarea></td>
            </tr>
        </table>

    </div>
    <!---***********************************产品标签\分类\属性star****************************************************************************************************************************-->
    <div title="产品标签\分类\属性"  data-options="iconCls:'icon-edit'" style="padding:20px">
        <table class="grid" align="center">
            <tr>
                <td>产品分类:</td>
                <td>
                    <select categoryIds_=""  id="categoryIds" name="categoryIds" style="width: 200px; height: 29px;"  class="easyui-validatebox" data-options="required:true"></select>
                    <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildLabels();">加载标签</a>
                    <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildAttrs();">加载属性</a>
                </td>
            </tr>
            <tr>
                <td>产品标签:</td>
                <td id="labels"></td>
            </tr>
            <tr>
                <td>产品属性<br/><span style="color:red">属性用英文逗号隔开（红色,黄色,蓝色）</span>:</td>
                <td id="attrs"></td>
            </tr>
        </table>
    </div>
    <!---***********************************产品图片star****************************************************************************************************************************-->
    <div title="产品图片"  data-options="iconCls:'icon-edit'" style="padding:20px">
          <script type="text/javascript">
            //============================================单图============================================
            <%--删除图片点击事件--%>
            function deteleImgSingle(obj){
                $(obj).parents("#hospitalSingle").find("img").remove();
                $(obj).remove();
                $("#hospitalSingleInput").val("");
            }
            var _editor2;
            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
            _editor2 = UE.getEditor('upload_ue2',{
                serverUrl:"${path}/file/upload.do?compress=1"
            });
            _editor2.ready(function () {
                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                _editor2.hide();
                //侦听图片上传
                _editor2.addListener('beforeInsertImage', function (t,arg) {
                    $("#hospitalSingle").html(
                        '<img src="'+arg[arg.length-1].src+'"   alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">' +
                        '<span class="imgDelete" onclick="deteleImgSingle(this)">x</span>');
                    $("#hospitalSingleInput").val(arg[arg.length-1].src);
                });
            });
            //弹出单张图片上传的对话框
            function upImageSingle() {
                var myImage = _editor2.getDialog("insertimage");
                myImage.open();
            }

            //============================================多图============================================
            <%--删除图片点击事件--%>
            var arrSrc = [];//初始一个数组存放图片路径
            function deteleImgGroup(obj){
                // var src = $(obj).prev().attr("src");
                var index = $(obj).parent().index();
                $(obj).parent().remove();
                arrSrc.splice(index,1);
                $("#hospitalGroupInput").val(arrSrc.join(','));
            }
            var _editor3;
            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
            _editor3 = UE.getEditor('upload_ue3',{
                serverUrl:"${path}/file/upload.do?compress=1"
            });


            _editor3.ready(function () {
                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                _editor3.hide();
                //侦听图片上传
                _editor3.addListener('beforeInsertImage', function (t,arg) {
                    arg.map(function(ele,index){
                        $("#hospitalGroup").append(
                            '<div class="dragItemBox">'+
                            '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                            '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                            '</div>'
                        );
                        arrSrc.push(ele.src);
                    });
//                        每次上传事件触发都重新绑定拖拽事件
                    $('.dragItemBox').unbind('draggable');

                    $('.dragItemBox').draggable({
                        deltaX:0,
                        deltaY:0
                    }).droppable({
                        onDrop:function(e,source){
                            $(source).after(this);
                            $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                            arrSrc = [];
                            $(this).parent().find('.dragItemBox img').each(function(){
                                arrSrc.push($(this).attr('src'));
                            });
                            $("#hospitalGroupInput").val(arrSrc.join(","));


                        }
                    });


                    $("#hospitalGroupInput").val(arrSrc.join(","));
                });
            });
            //弹出单张图片上传的对话框
            function upImageGroup(){
                var myImage = _editor3.getDialog("insertimage");
                myImage.open();
            }
        </script>
        <div style="border: 1px solid #e0e0e0">
        <p>产品图片</p>
        <hr/>
        <table border="0">
            <tr>

                <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageSingle();">上传单张图片</a></td>
            </tr>
            <tr>
                <td>
                    <div id="upload_ue2"></div>
                    <input type="hidden" id="hospitalSingleInput" name="img">
                    <div style="position: relative;float: left;margin-top: 5px;" id="hospitalSingle">

                    </div>
                </td>
            </tr>
        </table>
        <p>产品轮播图片</p>
        <hr/>
        <table border="0">
            <tr>
                <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageGroup();">上传多张图片</a></td>
            </tr>
            <tr>
                <td>
                    <div id="upload_ue3"></div>
                    <input type="hidden" id="hospitalGroupInput" name="imgsUrl">
                    <div id="hospitalGroup">

                    </div>
                </td>
            </tr>
        </table>
        </div>
    </div>
    <!---***********************************产品图片end*************************************************-->

    <!---***********************************图文详情star*************************************************-->
    <style>
        .td1{
            border: 1px solid #e0e0e0;
            background-color: #e0e0e0;
            text-align: center;
            height: 60px;
        }
    </style>
    <div title="图文详情" data-options="iconCls:'icon-edit'" style="padding:20px">
        <table style=" border: 1px solid #e0e0e0;">
            <tr>
                <td class="td1"><h2>产品详情</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor" style="height:400px;"  name="detail"></textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td1"><h2>体检须知</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor1" style="height:400px;"  name="buyInfo"></textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td1"><h2>预约流程</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor2" style="height:400px;"  name="appointmentInfo"></textarea>
                    </div>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue1 = UE.getEditor('editor1',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue2 = UE.getEditor('editor2',{
                serverUrl:"${path}/file/upload.do"
            });
        </script>
    </div>
    <!---***********************************图文详情end*************************************************-->
</div>
    <div  data-options="region:'south',border:false" style="height: 24px; padding-top: 8px;text-align: center" >
        <a  class="easyui-linkbutton" icon="icon-save" onclick="submitForm()" >保存</a>
        <a  class="easyui-linkbutton" icon="icon-cancel" onclick="closeWin('modelAdd')" >取消</a>
    </div>
    </form>
    </div>
</div>
</body>
</html>
